<template>
  <div class="list-func">
    <!-- 选择框 -->
    <div class="func-input">
      <el-input
        size="large"
        v-model="selectInput"
        placeholder="Please input"
        class="input-with-select"
      >
        <template #prepend>
          <el-select v-model="select" placeholder="Select" size="large" style="width: 100px">
            <el-option label="名字" value="1" />
            <el-option label="账号" value="2" />
            <el-option label="手机号" value="3" />
          </el-select>
        </template>
        <template #append>
          <el-button :icon="Search" />
        </template>
      </el-input>
    </div>
    <!-- 功能按钮 -->
    <div class="func-btn">
      <div>
        <el-button type="primary" :icon="EditPen">添加</el-button>
        <el-button type="primary" :icon="Upload">上传</el-button>
        <el-button type="primary" :icon="Download">导出</el-button>
      </div>
      <el-button class="refresh" type="danger" :icon="Refresh" @click="handleRefresh">刷新</el-button>
    </div>
  </div>
</template>

<script setup>
import { Search, EditPen, Upload, Download, Refresh } from '@element-plus/icons-vue'
import { ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()
const select = ref('1')
const selectInput = ref('')
const handleRefresh = () => {
  router.go(0)
}

</script>

<style lang="less" scoped>
  .list-func {
    width: 100%;
    height: 100%;
    margin-top: -5px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    .func-input {
      .input-with-select {
        width: 500px;
      }
      margin-right: 20px;
    }
    .func-btn {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .refresh {
        margin-right: 10px;
      }
    }
  }
</style>
